<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-cascades"></i> 图书检索 </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div>
                <el-input placeholder="请输入关键信息" style="width: 400px; padding: 20px" v-model="keyword"></el-input>

                <el-button @click="handleSearch">搜索</el-button>
            </div>
            <div class="book-box" v-for="(item, index) in bookList" :key="index">
                <div style="padding: 20px">
                    <el-avatar :size="80" icon="el-icon-user-solid" :src="item.coverUrl" shape="square"></el-avatar>
                </div>
                <div style="padding-left: 20px">
                    书籍编号：<span>{{ item.id }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">书名：<span v-html="item.title"></span></div>
                <div style="padding-left: 20px; padding-top: 10px">
                    作者：<span>{{ item.author.name }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    所属分类：<span v-html="item.type"></span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    出版社：<span>{{ item.publisher }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">
                    出版时间：<span>{{ item.publishDate }}</span>
                </div>
                <div style="padding-left: 20px; padding-top: 10px">简介：<span v-html="item.description"></span></div>
                <div style="padding-left: 20px; padding-top: 10px">
                    <el-button :type="item.isCollect == 1 ? 'info' : 'primary'" @click="collectOrNotBook(item, index)">
                        {{ item.isCollect == 1 ? '取消收藏' : '收藏书籍' }}
                    </el-button>
                </div>
            </div>
            <div class="pagination" v-if="showPagination">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :current-page="query.pageIndex"
                    :page-size="pageSize"
                    :total="pageTotal"
                    @current-change="handlePageChange"
                ></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            bookList: [],
            query: {
                isPutaway: '',
                pageIndex: 1,
                id: '',
                title: '',
                type: '',
                authorId: '',
                publisher: ''
            },
            pageSize: 10,
            pageTotal: '',
            keyword: '',
            showPagination: true
        };
    },
    created() {
        this.handleSearch();
    },
    methods: {
        handleSearch() {
            if (this.keyword == '') {
                this.$http.post('/book/query', this.query).then((res) => {
                    this.bookList = res.data.data.list;
                    this.pageTotal = res.data.data.total;
                });
                this.showPagination = true;
            } else {
                this.$http.get('/book/search/' + this.keyword).then((res) => {
                    this.bookList = res.data.data;
                });
                this.showPagination = false;
            }
        },
        // 分页导航
        handlePageChange(val) {
            this.query.pageIndex = val;
            console.log(this.query.pageIndex);
            this.handleSearch();
        },
        collectOrNotBook(book, index) {
            this.$http.post('/book/collectOrNot/' + book.id).then((res) => {
                if (res.data.status == 1) {
                    book.isCollect = res.data.data;
                    this.$set(this.bookList, index, book);
                    if (res.data.data == 1) {
                        this.$message.success(res.data.message);
                    } else {
                        this.$message.warning(res.data.message);
                    }
                } else {
                    this.$message.error('操作失败');
                }
            });
        }
    }
};
</script>
<style scoped>
.book-box {
    display: inline-block;
    margin: 20px;
    width: 400px;
    height: 400px;
    background-color: rgb(234, 241, 241);
    border-radius: 8px;
}
</style>